<template>
  <demo :code-str="codeStr" :code-desc="codeDesc">
    <template #componentName>加载状态</template>
    <template #componentDesc>通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loading-text 设置加载状态下的文字。</template>
    <template #component>
        <h-row>
            <h-button loading type="primary" />
            <h-button loading type="primary" loading-type="spinner" />
            <h-button loading type="info" loading-text="加载中..." />
        </h-row>
    </template>
</demo>
</template>

<script>
export default {
  name: "MobileV1ButtonLoadingDemo",
  data() {
    return {
      codeDesc: '通过 <span>loading</span> 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 <span>loading-text</span> 设置加载状态下的文字。',
      // 注意转义：https://github.com/vuejs/vue-loader/issues/506
      codeStr: `
        <template>
          <h-row>
            <h-button loading type="primary" />
            <h-button loading type="primary" loading-type="spinner" />
            <h-button loading type="info" loading-text="加载中..." />
          </h-row>
        <\/template>
        <script>
          import { HRow, HButton} from "hztech.vant"
          export default {
            components: {
              HRow,
              HButton
            }
          }
        <\/script>
        <style>
        </style>
      `.replace(/^ {8}/gm, '').trim()
    }
  }
}
</script>

<style>

</style>